<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>统计</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="__ADMIN__/css/font.css">
<link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
<script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
<script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
<script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>
<script type="text/javascript" src="__ADMIN__/js/echarts.min.js"></script>
<style type="text/css">
body{position: relative;}
#chart1{width: 50%;height:{:count($chartData)*27}px;position: absolute;left: 0;top:8%;}
#chart2{width: 50%;height: {:count($chartData)*27}px;position: absolute;right: 0;top:8%;}
#form{width: 100%;height: 8%;position: absolute;top:0;}
#table1{width: 100%;position: absolute;left: 0;top:{:count($chartData)*27+50}px;overflow: auto;padding: 20px;}
.layui-table td{font-size: 16px !important;}
.layui-table th{font-size: 16px !important;font-weight: 800}
#table2{width: 50%;height: 100%;position: absolute;right: 0;top:108%;overflow: auto;}
.layui-form-select dl{z-index: 9999 !important}
</style>
</head>
<body>
<div id="form">
    <form class="layui-form layui-form-pane" action="" style="text-align: center;">
    <div class="layui-form-item" style="margin-top:5px;">
        {include file="public/quick_date" /}
        
        <!--<div class="layui-inline">-->
        <!--  <div class="layui-input-inline">-->
        <!--    <select name="order_type" id="order_type">-->
        <!--        <option value="">排序方式</option>-->
        <!--        <option value="lr_count">录入数</option>-->
        <!--        <option value="ba_count">保A数</option>-->
        <!--        <option value="qd_count">签单数</option>-->
        <!--    </select>-->
        <!--  </div>-->
        <!--</div>-->
        <div class="layui-inline">
          <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo2">查询</button>
        </div>
    </div>
    </form>
</div>
<div id="chart1"></div>
<div id="chart2"></div>

<div id="table1" style="margin: 20px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>{$start_date}至{$end_date}全部员工客户数据</legend>
    </fieldset>
  <table class="layui-table">
    <colgroup>
      <col width="150">
      <col>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <!--<th>id</th>-->
        <th>姓名</th>
        <th>录入客户数</th>
        <th>保A数</th>
        <th>签单数</th>
        <th>当前洽淡数</th>
      </tr> 
    </thead>
    <tbody>
        {foreach name="data" id="value" key="key"}
        <tr>
            <!--<td>{$key}</td>-->
            <td><a title="点击查看业绩" onclick="x_admin_show('{$value.name} 的业绩','{:url('Staff/yeji',['aid'=>$value.id])}'),false,'800','600'"  href="javascript:;">{$value.name}</a></td>
            <td>{$value.lr_count}</td>
            <td>{$value.ba_count}</td>
            <td>{$value.qd_count}</td>
            <td>{$value.qt_count}</td>
        </tr>
        {/foreach}
    </tbody>
  </table>
</div>
<!-- <div id="table2">
    

</div> -->

<script type="text/javascript">
layui.use(['form', 'layedit', 'laydate','table','jquery'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,laydate = layui.laydate
  ,table = layui.table
  ,$ = layui.jquery;
   
  laydate.render({
    elem: '#start_date'
  });
  laydate.render({
    elem: '#end_date'
  });

  $('#order_type').val('{$order_type}');
  form.render('select'); 

});
</script>


<script type="text/javascript">

var option1 = {
  title:{
    text:'员工客户状态'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow' 
    }
  },
  legend: {},
  grid: {
    left: 75,
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    max: function(value){
        return value.max * 1.2
    },
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: [{foreach name="chartData" id="value"}"{$value.name}",{/foreach}],
    axisLabel: {
        fontSize:15,
        fontWeight:'500'
    }
  },
  
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
  series: [
    /*{
      name: '洽谈数',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [{foreach name="chartData" id="value"}"{$value.qt_count}",{/foreach}]
    },*/
    {
      name: '保A数',
      type: 'bar',
      stack: 'total',
      color: '#FF8C00',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [{foreach name="chartData" id="value"}"{$value.ba_count}",{/foreach}]
    },
    {
      name: '签单数',
      type: 'bar',
      stack: 'total',
      color: '#ff2020',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [{foreach name="chartData" id="value"}"{$value.qd_count}",{/foreach}]
    }
  ]
};
var option2 = {
    title:{
        text:'员工录入数量'
    },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow' 
    }
  },
  legend: {},
  grid: {
    left: 75,
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: [{foreach name="chartData" id="value"}"{$value.name}",{/foreach}],
    axisLabel: {
        fontSize:15,
        fontWeight:'500'
    }
  },
  toolbox: {
    feature: {
        dataZoom: {
            yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
    }
  },
  series: [
    {
      name: '录入数',
      type: 'bar',
      color: '#202080',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [{foreach name="chartData" id="value"}"{$value.lr_count}",{/foreach}]
    }

  ]
};

var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
chart1.setOption(option1);
chart2.setOption(option2);
/*
ajaxget();
function ajaxget(){
    $.get('{:url('stats/staffData')}',function(data){
        option1.series = data.data;
        option1.xAxis = data.staff;
        console.log(data);
        chart1.setOption(option1);
    },'json');
}
*/
/*
$(window).resize(function(){
   $('#chart1').resize();
});
*/

$(function(){

})


</script>

</body>
</html>